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Abstract 


According to the current study, children adores reading fairy tales or comics 
since their childhood. In today’s world, digital grounds have transformed 
storybooks into animated illustrations. In particular, famous studios like 
Disney are producing movies out of them to attract and influence millions 
of children. However, moral based stories have always been in demand to 
teach children that how to pay heed to the elder’s advice. Also, how to 
morally transform their behavior in a positive manner. Khel Tale is a 
modern version of animated storybook application for children to play 
which asks them to pick one of the main characters of their own choice, out 
of the story. Thus, children enjoy the consequences of making those choices 
at the end of the story. It is a choice based animated storybook that plays 
3D animation clips in order to narrate the whole story to children through 
pictorial illustrations. The main purpose of this mobile application is to 
teach children regarding the importance of obeying the instructions of their 
elders through decision-based 3D animated stories. The application runs in 
landscape mode and is divided into further episodes. The content of each 
episode covers a small lesson for children. An episode begins by playing a 
fixed 3D animation video clip, and later on it offers two choices to children 
in order to particularly conclude the episode either with a good choice or a 
bad choice. Later, children can also see the consequences of their choices 
and actions in the story. The basic concept of this application revolves 
around a thought that mostly children are fascinated by the characters they 
observe in cartoons and read in stories. Hence, they start relating them to 
those characters. This concept is evolved by combining the approach of 
teaching to children through 3D animated stories where they can choose the 
characters to see the reaction of not listening to their elders. They also 
observe that what reward they can get if they actually act patient and listen 
to what elders advised them. Hence, the current study regarding Khel Tale 
application concludes it with the effectiveness. 
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Index Terms: Animated storybook, audio dubbing, computer 
animations, Khel Tale, teaching good behavior, 3D and 2D visual models 


I. Introduction 


The current study claims that one of the most prevailing issue around us 
today is that children seldom pay heed to their elder’s advices. These days 
children possess “know it all” behavior which makes them think that they 
already know everything. In reality, children lack basic understanding of 
the real-world problems which causes troubles for them as well as for their 
parents. Most parents consider yelling and scolding as an effective measure 
to make their children listen to them, which is an aggressive behavior and 
should be avoided. In reaction to this aggressive behavior of the parents, 
children are not fond of listening to their instructions. Also, they show 
resistance to the lectures given by their elders and mainly act stubborn [1]. 
Thus, the disobedience of the children becomes a problem and struggle for 
their parents. 


Moreover, parents always guide their children by giving them the real- 
world examples. They often make them aware of the consequences of 
neglecting the elder’s advices. Despite that children still ignore those 
instructions. Anyhow, the main reason of doing this is that they are young 
and they lack experience. The experience and maturity are gained with the 
passage of time or when a problem is faced practically. Children love 
watching animated stories as they are easily influenced from their favorite 
characters [2]. While imitating those characters, they try to talk, dress, and 
even act like their favorite animated toon characters. Hence, the process 
becomes even easier for children to learn if they can directly relate 
themselves to the characters they watch; and observe in an animated video. 


A. Mobile Application 


Khel Tale is a modern 3D animated storybook mobile application for 
children which allows them to make choices of the main character out of 
that specific story. It further allows them to see the consequences of those 
choices they have made inside the story while playing that game. Moreover, 
it is a choice based animated storybook that plays 3D animated clips to 
narrate the moralistic stories to children. Its main purpose is to teach 
children regarding importance of obeying instructions given by their elders 
through decision-based 3D animated stories. Furthermore, it is a mobile 
application that runs in landscape mode on full screen. It narrates a story by 
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playing 3D animated clips. Besides, children can interact with Khel Tale 
application by making decisions for the main character they choose. It 
happens when application asks them about choices of characters by showing 
them split screen with two choices. 


Fig. 1. Child listening to mother’s advice in Khel Tale 


A story in this application is divided into episodes; and each episode is 
composed of 3D animated videos. The content of each episode contains a 
small lesson for children. In this case, an episode begins with playing a fixed 
3D animated video clip which later shows two further choices. Thus, for 
that particular episode to conclude either a good choice or a bad choice. 
When a child makes a decision by selecting the desired action for the main 
character on split screen with choices, application plays the relevant 3D 
animated clip to continue with the story. In this way, children are able to 
see the consequences of their actions in the story. Each episode covers one 
topic and its narrative or storyline is not dependent on the other episodes 
[3]. Every episode in the end gives two choices to children to decide how it 
should end as illustrated in Figure 2. 
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Fig. 2. Khel Tale asking children to make a choice for character 


Application uses 3D animated videos that are rendered in child friendly 
style of visual arts. All 3D objects such as characters and models are 
constructed by using geometric modelling with the help of polygons [4]. It 
delivers a smooth animation and camera work that is similar to modern day 
child friendly cartoons. Furthermore, characters use rig for the animation 
and all the 3D objects use the key-frame animation. Thus, voice dubbing for 
games characters is done in Urdu language. Story of episodes in Khel Tale 
are written carefully so that children do not get bored. These stories are 
representing pure culture of Pakistani society. 


Khel Tale is teaching children the main lessons regarding how to obey 
their elders. In modern times children are more into gadgets and new 
technologies because these things inspire them, attract them, and they love 
to play with them [5]. Khel Tale provides them friendly 3D animated 
graphics with valuable life lessons. The main purpose of 3D animation is to 
attract children towards the leading character so that they can relate 
themselves with that character. The decision-making option inside a story 
tells children what they can make decisions on the basis of their selection 
choice offered in the game. Sometimes children need to learn and 
understand that what can be the consequences of choosing wrong direction 
in their life story. However, they can get hurt in the process of reaction 
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shown by game in reality. So, it is a good way to show children that what 
can happen to them in reaction of choosing the wrong path with the help of 
a safe mobile application. 


B. Animation 


Animation is just an illusion of an action which is generated or depicted 
by the series of rapid frames or images. It depicts movement and motion by 
flipping the still/non-movable images shown in the App, quickly. 
Animation can be classified into several types, some are listed and 
explained below. 


Traditional animation is one of the oldest forms of animation, it is also 
referred as hand drawn animation sometimes. Moreover, it is used to draw 
the animation key frames with the help of a sequence. It shows images in 
series-based sequence which comes one after another, meanwhile 
presenting an illusion of a motion. Flip books are also considered in the 
series of pictures which shows a story in some sequence created by using 
traditional animation. This kind of sequence of pictures is still used by the 
designers. In this case, stop motion animation converts static objects to life 
with the help of photographic frames. It has different types including clay 
motion, puppets, cutouts, silhouette, action figures, and pixilation. 


Computer animation is simply a process of generating animation with 
the help of a computer. It is the generation of moving images from a 
computer. It is the branch of CGI (Computer Generated Imagery) which is 
further classified into 2D and 3D animation. 2D animation allows the 
movement of different objects in a two-dimensional space, where objects 
could be anything including characters, vehicles, environments, 
backgrounds, and others. It’s an illusion of smooth movement that is created 
in a 2D space when the drawings are arranged in the right sequence. It is a 
combination of hand drawing and digital artwork. It is also done usually 
with the help of sprite. A sprite is a 2D image that represents a single frame 
in an animation. A series or collection of sprites is called a sprite sheet. A 
sprite sheet is normally flipped at 24 frames per second at least to get 
smooth animation. In some cases, it is also flipped at 30° or even 60° angle. 


3D animation allows the movement of different objects in a three- 
dimensional space, it involves the transformation of objects with respect to 
the movement, rotation, and scale. It is actually an art of bringing characters, 
vehicles, environments, and several objects closer to create more realistic 
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shape. 3D animation is done with the help of 3D modelled characters that 
uses geometric data. Animation is done with the help of key frames that 
uses linear interpolation principle in most common cases to move a 3D 
object from one point to another point in a scene with the help of 
interpolated frames. Furthermore, living creature models are rigged with the 
help of artificial bones and in this case, they are animated either by using 
forward kinematics or inverse kinematics. Besides, rigging add accuracy to 
the animation with the help of bones, joints, and end effectors. Another 
advance technique called motion capture is also used for 3D human 
animation, which maps the movement of an actual human being and 
transform it into a 3D human character with the help of a special suits by 
using sensors. It records the movement of the person with the help of 
sensors and apply it on the 3D character to accurately animate it. 


C. Background and History 


It started over 25000 years ago, from cave paintings in Paleolithic which 
is an old stone age. Animal paintings placed in the caves depicted an image 
of motion, presenting that as if animals are actually moving. In 1500, a man 
named A.D Leonardo da Vinci drew a Vitruvian Man which presented 
different motions and angles. In 1603, Magic lantern became the first 
animation projector which displayed images by using pictures on glass 
sheet. In 1824, the invention of Thaumatrope from paper and string allowed 
children to see an illusion of combined images. Inl941, Phenakitoscope 
came which created an illusion of motion with principles of vision. A 
cylinder-shaped device named Zoetrope generated illusion of motion with 
the succession of static still images in China during 1860’s. In 1877, an 
improved Zoetrope version by the name of Praxinoscope came in France. 
As the time passed, the paper came into existence and available to everyone 
so after that people started making their own flip books. Flip book is a 
paper-based toy that depicts motion. It consists of connected layered sheets 
of paper with the linear sequence of images [6]. 


In the early 20th century, many animators started exploring facial 
expressions of people such as anger, humor, and other. 1900’s is also 
considered as the era of animation. In 1914, first ever cartoon style animated 
movie by the name of Gertie the dinosaur featured an appealing dinosaur 
character. In 1919, Felix the Cat came with the first animated movie star. 
Walt Disney dominated the industry with its famous Mickey Mouse 
character, loved by both elders and children equally. Sound printing on the 
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film along with the cartoon animation became the main reason for its 
popularity. In 1930, Warner Brothers’ famous character Bunny became the 
center of attention of every child and it is still loved by everyone. Snow- 
white came as the first-hand drawn feature film. Furthermore, its production 
process consumed a lot of time in order to make it a first full length animated 
film. After mid 1900’s, American television dominated the animation 
specially from 1960 to 1980, as Crusader Rabbit appeared as first animated 
series on television. Later Flintstones appeared as the first sitcom animated 
series and then Jetsons. Yogi Bear also became famous in 1961 as it 
depicted the acts of a bear animal. 


After 1980, CGI (Computer Generated Imagery) started to dominate the 
industry and brought revolutionary graphics. Pixar released Toy Story in 
1995 as first fully computer-generated animated movie. After two decades 
it is still considered as a huge success. It changed the perspective of an 
animated movie [7]. Today, our modern world animations are fully backed 
up by computer assistance and animation. Thus, these animations are 
advancing day by day by using the new features and techniques for the 
process of ray tracing, light illumination, and rendering. 


II. Literature Review 


Walt Disney came into existence in 1923, which is now known by the 
name of Walt Disney Company. Walt Disney started with short film Alice's 
Wonderland that showed interaction with the animated characters [8]. Later, 
they launched animated cartoon series by the name of Alice Comedies. 
After Alice Comedies, Walt Disney created a cartoon series featuring a 
popular character by the name of Oswald the Lucky Rabbit. Hence, Walt 
Disney produced the famous Mickey Mouse character in 1928 and featured 
it in its first sound film Steamboat Willie. 


According to Gange in 1970, animation is a sequence of text and 
images. Traditional animation uses many popular 2D techniques [9]. 
Storyboarding technique defines the important and significant moments in 
story by using still images in order. It is a visual representation of series 
which runs in a smooth way. It divides a story into multiple scenes and each 
scene is then drawn on a separate sheet. Each scene is further described with 
notes that explained what is going on in this particular scene. It can also act 
as a visual guide. Key frame animation defines the movements from start to 
end of a specific transition. It contains information about the beginning and 
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completion of an animation [10]. Key drawings that define the shape and 
path of a particular animation are called key frames, and each single still 
drawing in between key frames acts as a frame in animation. So an 
animation becomes a combination of both key frames and frames. Another 
similar related technique is Inbetweening that outlines the important key 
frames for an object’s animation to generate the intermediate frames 
between them. It improves key frames to give a better quality of motion. It 
is also known as twining that uses mathematical concepts of interpolation 
in order to smooth the motion and shape of objects in an amination. Other 
popular techniques are scan/paint) and multiplane background which 
further separates background from foreground [11]. 


3D computer animation uses the techniques from traditional 2D 
animation and extend those techniques so that they can be used for 3D 
animation, where 3D models are used instead of 2D illustrations. These 
fundamental principles from traditional 2D animation are included but not 
limited to squash and stretch, timing, anticipation, staging, follow through 
and overlapping action, straight ahead action and pose to pose action, slow 
in and out, arcs, exaggeration, secondary action, and appeal [12]. 


Models are represented in 3-dimensional space but are projected on 2- 
dimensional plane, resulting in a 3D representation of a 2D drawing on a 
screen. One of the most used and significant technique for 3D animation is 
key frame animation, in which position of 3D objects is interpolated 
between key frames [13]. A frame represents a particular state in an 
animation. For a key frame animation, the animator only defines the Key 
frames and resultant animation is generated using interpolation. Key frame 
animation allows an animator to define the position, rotation, and scale of 
3D object at any particular frame, turning that frame into a key frame. 
Interpolation can be of any nature like linear, bilinear, cubic, spline, and 
others. Key frame animation is further used to create motion cycles, like 
cycle of walking or running. 


3D character animation involves modelling a character in 3D and then 
rigging it with skeletons including bones. Rigging is the process of defining 
an internal skeleton of a 3D character and mapping it carefully with 3D 
character model parts. A single skeleton can be used on the basis different 
characters and being given the same character structure. Many animators in 
modern day are using automatic rigging that allows them to turn a static 3D 
model into an animated character easily [14]. In addition to it, after rigging 
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the most important part which is an animation, one of the most popular 
character of animation technique in kinematics. Kinematics refers to 
scientific discipline to consider movement without taking forces into 
account. Kinematics is further divided into forward kinematics and inverse 
kinematics [15]. Forward kinematics considers the movement and 
orientation of a single bone in a skeleton whereas inverse kinematics 
calculate the movement and orientation of all the bones in a single chain. 


In modern world animation is becoming important in education sector, 
it is ranging from explaining the concept in a simple way that how to do 
animations for the complex scientific explanatory simulations. In addition 
to it, teachers are now adapting different ways to teach and communicate 
with their students. Verbal methods of teaching have dominated for a long 
time but now educators are taking assistance from the other methods as well. 
Mackenzie and Jansen [16] found out that while teaching process, the usage 
of graphics and multimedia is better than using the traditional methods. 
Instructions given through multimedia captured the attention of students 
more effectively. It showed that presenting the complex concepts in 3D is 
more effective as compared to the traditional 2D drawings. Animations 
combined with audio and video segments further helped in explaining the 
concepts. The current studies state [17] that animated graphical 
representations are more effective in communication and teaching than the 
printed materials. They can easily deliver different dynamic range of 
information as compared to static diagrams and images. Animation can 
become a good learning tool for students depending on the story of 
animation and design of its characters [18]. Additionally, giving 
expressions to the characters of the animation during any movement makes 
a positive impact. Psychology for colors used in animation also plays an 
important role in delivering the content to the students through an 
animation. 


Whereas, children can build a strong relation with technology and can 
achieve a greater sense of empowerment. In future, the computing devices 
can be a part of every child’s education and as it is expected that the children 
would be able to do more in future, what they could before [19]. Also, 
children can connect themselves with rich powerful technology and can take 
assistance in their schooling. In today’s world, the computing power is 
increasing day by day. Thus, children can take advantage of modern-day 
technology to get quality education. 
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Ill. Materials and Methods 


In today’s world, learning through different means is necessary. 
Moreover, children of the present age can easily adapt the various means of 
direct and indirect education with the help of animated videos. However, 
they can also entertain themselves at the same time from the animated video. 
For this purpose, the Khel Tale application focuses on teaching morals, 
ethics, and importance of advice from the elders towards children within 5 
to 12 age group. Hence, effective learning always come through experience, 
so the primary idea is to give children a sense of simulated experience in 
the form of a decision-making story. The decision to adopt 3D instead of 
2D graphics is because of the immense popularity of modern 3D graphics 
among children. 2D graphics relies on sprite sheets mostly. Whereas, 3D 
graphics are constructed with the help of mathematics and geometry. 


A, Story Writing 


In writing a story for children, it is an important thing to keep in mind 
that it should be child friendly because any disturbing content can further 
lead to a bigger problem. Children are sensitive and even the little things 
can easily hurt them. Any violent or disturbing content can be really 
distressing for the children. Children are also impatient and they need quick 
results. For that reason, they want to see everything happening around very 
quickly. So, story has to be short and precise without any ambiguity or 
doubt, long advices, or exaggerated points without any specific reason. 
Thus, overemphasized points make them bore and they leave that thing 
immediately. It can be anything like an advice by parents or teacher, 
cartoons or any other thing. 


In today’s world, children observe that everyone is wasting their time 
in useless activities like playing games, watching TV, and others. As a result 
of this, they also start following the same path like others. For this case, 
wasting time is not a productive habit, even it makes them further lazy and 
ultimately it negatively affects their education. So, it is really essential for 
them to start using their time, wisely. Pilot episode is also focusing on 
wastage of time. In first episode, when the main character, ‘child’ comes 
home after school and his mother asks him to study for his exam first and 
not to waste his time. In that advice, she wants him to understand the value 
of time. Later, when the friend of the child comes home, and asks him to 
play. The child gets two options either to play or to study for exam. If the 
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child opts for the bad option and goes out to play, the next day he fails in 
exam because he did not study enough for his exam, last day and he 
ultimately loses his reward expected by his father. If he chooses good option 
and studies for the exam, the next day he passes the exam, and gets the 
reward as expected by his father. This story conveys important message 
regarding not to waste time for students, also to listen to the parent’s advice 
ultimately shows that how much time is precious. 


B. Storyboarding 


After story writing, storyboarding is an essential part to make an 
animation outstanding [20]. It consists of images and illustrations which are 
arranged in such a sequence that it conveys complete story in pictorial form 
on a paper. It describes each and every scene and shot. It depicts the flow 
of a story, and allows the author to see problems in more details. It creates 
a sequence that is closer to the actual animation. It is basically a sketch or 
outline of a story with the little description of dialogues. It is a simple 
method that helps in comprehending the story in a better way. For modelling 
purpose, after story writing and storyboarding, it becomes easier to identify 
the objects, environments, characters, and others. In general, it is a bird’s 
eye view of whole animation for a story. 


C. Theme, Environment, and Characters Development 


§ 


Fig. 3. Khel Tale characters left to right (Aliya, Adnan, Essa, Noman, and 
Shafiq) 
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The theme conveys or depicts the overall look and feel in terms of a 
content that is included but not limited to a story and its visual appearance 
including art style and colors, aural effects including dialogues, sound 
effects, and others. The overall animated themes in terms of content is 
exemplary, the dialogues are easier for children to understand, and they do 
not contain any kind offensive words. It is very eye catching and colorful in 
terms of visuals and art style. Mostly using gradient and flat shade colors 
with combination of textures as well, where necessary. 


Every character has its own unique personality and characters which are 
created with the help of those personality traits. These traits are also 
reflected in animation and speaking style of a character and they are also 
visible on facial and body features of a character. There are five characters 
in Khel Tale application as illustrated in Figure 3. 


Essa is the main character of Khel Tale, and he is the one who follows 
the decisions from the children between good and bad option. Essa is 9 years 
old and the only child of his parents. He is a school going student, and he is 
very humble and obedient. However, sometimes he ignores the advices of 
his parents which in return makes him suffer. He loves to play football. The 
other two characters are the parents of Essa. His father Adnan who is an 
engineer by profession, and he is 42 years old. His mother Aliya who is a 
housewife, and she is 40 years old. Both parents are very concerned about 
the well grooming of their only child, they constantly advise him regarding 
morals, ethics, and discipline. Another important character is Noman, who 
is school going neighborhood friend of Essa. Noman is a little weak in his 
studies, and he reads in the same class as Essa. Noman loves to play video 
games. The final character is teacher Shafiq, who teaches both Essa and 
Noman in the school. He is very punctual and disciplined teacher, and he 
likes to read books. 


All the characters and stories are set in a city of Pakistan who resembles 
and are inspired of the capital city Islamabad. Khel Tale application 
revolves around Pakistani society, it depicts a friendly neighborhood with 
independent houses on the main street in front of a park. There is also a 
masjid nearby across the park, and a commercial market plaza. Masjid is an 
important part of Pakistani society as it is an Islamic country where majority 
of the population is Muslim. Likewise, the commercial market is also 
similar to the big commercial markets seen in the city of Islamabad. The 
home of Essa is right next to the home of Noman, and both homes are 


UMT—83 


School of Design and Textiles Ron 
x f 
Volume | Issue 2, Fall 2022 on 


Khel Tale: An Interactive ... 


situated right in front of a park. Park has a play area for children which 
consists of swings, slides and other things. It is a normal park which is 
mostly seen in Pakistan. It is also equipped with street lights and trees as 
well. Exterior of houses are simple yet modern, and equipped with main 
front gate with car ramp. Inside the house of main character, there are 
common room like bedroom, lounge, kitchen, dining, washroom, and lobby. 
All rooms are appropriately decorated and furnished. 


D. Environment and Character Modelling 


3D modelling is a mathematical representation of three-dimensional 
objects in a computer. It is a technique which forms three dimensional 
objects with the help of computer software. 3D models are used to represent 
real world objects as visual arts inside computers. A 3D model is composed 
of vertices which are connected with one another to form edges. Edges are 
connected with one another in a closed loop to form a face, and the 
combination of these faces actually creates a mesh, which is a 3D model or 
3D representation of a real-world object in computer [21]. 


A 3D model actually represents the basic building block in computer 
graphics design. Everything is first modeled with the help of basic primitive 
shapes like cube, sphere, cylinder which are composed from geometrical 
either from polygons or splines. Then these models are used to create things 
more complex shapes like buildings, structure, characters, vehicles, and 
everything that we see in an animated movie or in 3D rendered graphics. 


Environment is modelled with basic primitive shapes mostly cubes. 
Cubes are extruded and tweaked to get the definitive shape of buildings, 
houses and other similar objects. Curved and circular objects are mostly 
driven from spheres and cylinders [22]. All material-based environment 
objects like structures, vehicles, furniture, plants, and others are mostly an 
advanced and complex combination of primitive shapes. 


A character model is not different than an average 3D model, but it is 
the most complex combination of geometry points. A character is composed 
of as usual basic vertices, these vertices are joined together to form a full 
shape 3D character which is also known as a mesh. Mesh is formed with 
the help of faces and polygons. The basic structure of a character begins by 
modelling a face on a sketch. Sketch is created for front and side pose by 
hand, then the sketch is used as reference point to carve out the character 
from primitive shapes. 
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Fig. 4. Front and side pose of child 3D model showing vertices and edges 
in wireframe mode 


Everything is carved out from basic primitive shapes, including the 
facial features. It starts with a basic cube over the reference sketch, and then 
the process begins by adding, mapping and moving vertices manually all 
over the sketch for the character. Each and every vertex is traced, and all of 
these tracings correspond to the shape that is sketched behind on the 
reference image. It starts from modelling the eyes then forehead, nose, lips, 
mouth, chin, the oval facial structure to complete the front view of a face. 
After completing the front model of a face, the side view mapping beings. 
3D model has a different view from front and side. Each and every vertex 
is traced according to the reference image on side view as well. Both front 
and side view of models are created side by side because of the limitation 
of working on a 3D model in a 2D screen. Out of 3 axes in 3D, only 2 axes 
as a plane are visible accurately for orthogonal camera at same time. It has 
to be kept in mind that both sides of character contain same look, and mirror 
modifiers can be used to achieve that result. The process continues after the 
face, it then goes to neck and shoulder. The process involves filling the 
polygons as well to compose a full neck, shoulder, and ears. After that, the 
upper portion of torso which includes back and chest is created by extending 
the vertices, then lower part is completed with the help of reference images. 
Then comes the turn of arms, elbows, forearms, wrists, hands, and fingers. 
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Same process is repeated for legs, knees, ankles, feet, and toes. Finally, the 
head hairs are created to complete the full character. Figure 4 illustrates 
complete 3D model of main character’s child in wireframe mode, which is 
showing all the vertices, edges and faces, along with their connections from 
front and side view. 


The next part after modelling the biological features of a character is to 
model the apparels. The clothing is modelled in a similar way on the top of 
the character’s body. Shirt, trouser, shoes, glasses, jewelry, and others are 
also modelled with the help of reference images as well. Sometimes they 
are extruded from the character’s biological meshes, and sometimes they 
are carved out from scratch as well. Figure 5 illustrates complete 3D model 
of main character’s child in clothing and shoes in solid mode, from front 
and side view. 


Fig. 5. Front and side pose of child 3D model with clothing in solid mode 


Visuals are extremely important and they are achieved with the help of 
materials in modern 3D computer graphics. A material can be considered as 
a layer that can be wrapped on the top of a 3D model to enhance its visual 
appearance. A material is responsible for the final color and texture of a 3D 
model [23]. It further aids in creating the desired visual effects with 
interaction of light. Khel Tale application used combination of diffuse and 
specular materials properties; diffuse materials are mainly used for rough 
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surfaces whereas the specular materials are used for shiny surfaces. The 
application did not used any transparent materials, however in few areas it 
used the mirror like reflection to reflect colors and light in the surrounding. 
The materials are simply using shaded gradient colors throughout the 
animation to give it a modern and more sophisticated look. The gradients 
used in application are mainly the combination of two colors. Character 
apparels are using fabric textures. The decorative items in the house and 
school like paintings or furniture are using textures. Outside the house and 
school, grass is using texture. 


E. Rigging and Animation 


Animation of basic primitive 3D object is simply achieved with the help 
of key-frame animation, where an object’s position, rotation, and scale are 
interpolated between two points, also called key-frames. The properties of 
an object like its position, rotation, scale, and others, at a starting point are 
recorded at a particular frame in timeline, which turns a frame into a key- 
frame. Then the object is moved, rotated, and scaled as desired and its 
properties at an ending point are recorded again on another different frame, 
which turns that particular frame into a key-frame as well. Now all the 
intermediate frames between those two marked key-frames are 
mathematically interpolated with the properties to create a smooth 
animation between those properties from start point to end point, and 
transform the object from its starting point state to its ending point state. 


However, character contains a lot of vertices, and it is not easily possible 
for an animator to use simple key-frame animation. So, a character is rigged 
with bones and joints, similar to the bones and joints human body. These 
bones and joints are mapped to the corresponding vertices of character, the 
movement of bones inside a rig also moves the mapped vertices. Hence, it 
creates a realistic human like animation. Movement of each bone is also 
controlled with the help of same key-frame animation. Figure 6, illustrates 
complete rigged 3D model of main character’s child mapped with its 
vertices, from front and side view. 


Pat 
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Fig. 6. Front and side pose of rigged child 3D model in solid mode 


A rigged character is animated either by using forward kinematics or 
inverse kinematics. In forward kinematics, the entire hierarchy is rotated 
manually one by one [24]. For example, in order to rotate an arm using 
forward kinematics, all the hierarchy bones like shoulder, elbow, wrist and 
hand should be adjusted manually. In inverse kinematics only end effector 
is moved. For example, in order to rotate an arm using inverse kinematics, 
only wrist or hand would be manually adjusted and it adjusts all the other 
bones itself. Khel Tale application primarily uses inverse kinematics for 
most of its animation, only on few occasions to achieve extra accuracy 
which uses forward kinematics as well. 


F. Lightning and Rendering 


Lightning is most crucial element to get the good visuals on screen [25]. 
Light is responsible not only for illuminating the objects but also for adding 
a factor of realism to it. It can be a point light, spot light, area light, or a 
directional light. It can have intensity and direction as well. Light can be 
direct or indirect. A direct light is the light that after hitting a surface only 
one time is converged to the camera sensor. Indirect light is more accurate 
to add realism factor as it calculates the multiple bounces of light reflection 
in a scene before hitting the camera sensor. 
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Fig. 7. High quality rendering on left and normal quality rendering on 
right 


Rendering is the process of generating the final visual output after 
calculating the light and material properties on 3D models. Khel Tale 
application uses a combination of both direct and indirect light in rendering 
the final output. It uses global illumination to light up the whole scene which 
adds more realistic reflections along with soft and hard shadows. It is also 
using ambient light in the background as well. All the lights in application 
are baked with multiple reflection settings. Animation is using area lights 
and point lights inside the house and school. It is using directional lights to 
imitate the effect of sun in the environment outside the house. An 
environmental HDRI texture is simulating the sky separately for day time 
and evening time. It uses high quality rendering settings. After rendering, 
in order to get rid of minor noise elements around the corner of objects in 
images, a denoiser is used to balance the light and remove the noise. Figure 
7 illustrates the high-quality rendering with around 100 indirect bounces of 
light using global illumination on left side, and a normal quality rendering 
with regular quality light settings on right side. 


G. Video Editing and Audio Dubbing 


After the rendering of all the animated scenes, they are joined together 
by using a video editing software. Multiple cameras have recorded every 
scene, pointing towards different locations and angles by using different 
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zoom settings. Videos are stitched together after viewing and selecting the 
appropriate cameras to cover the respected scene. 


Audio is recorded of every dialogue in Urdu for each character in Khel 
Tale for all the scenes and shots. Then audio clips are overlapped in a video 
editor timeline over the related videos, and synchronized altogether. Sound 
effects and music is also added to enhance the overall experience of 
animated story. Every scene and shot is post processed and exported in 
standard video encoding, so that it can be played in Khel Tale mobile 
application. 


H. Application Development 


Finally, the Khel Tale mobile application is developed for children that 
allowed them to play and watch the 3D animated story. The application uses 
the final rendered high quality Urdu dubbed videos. It allows the children 
to make the decision for their main character. After the decision, the 
application plays the appropriate 3D animated video associated with the 
selected ending. Application also records the activity of children regarding 
their decision making, and it sends the data over the internet for research 
purpose after the permission and consent of parents. 


IV. Results and Discussion 


The current study investigated the effects of indirect advices given by 
the 3D animated characters to children in choice-based story mobile 
application Khel Tale. Further, the present study explored that if the choices 
made in second and third attempt by the same child on same episode is 
different or not, depending on seeing the consequence of the previous 
choices. This study also aimed to find out the usefulness and 
appropriateness of the methodology used for teaching children indirectly 
with the help of Khel Tale application [26]. 


A. Research Design 


A quantitative research design is used in the current study to effectively 
measure the performance of the Khel Tale application in the statistical 
terms. Also, in quantitative methodology the information can be analyzed 
numerically. The present study focuses on one main question which is asked 
three times to observe that if the child is actually picking up the advice or 
not. The current study questioned the choice of a child three times 
repeatedly for same episode. What option the child picked the first time? 
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What option the child picked the second time for the same episode? And 
what option the child picked the third time for the same episode? 


The reason of exploring the same question of picking the option for 
third time is because many children can choose the other option second time 
just to see the alternate ending of an episode, but for third time they can 
easily make an appropriate decision about the ending they liked the most 
among good and bad ending. 


B. Participants 


The current study included the children of age group (6 to 10) by taking the 
permission of their parents. It was especially done in order to collect the 
data about their usage of Khel Tale application about the choices they made 
while playing or listening to the story. In most cases, they operated under 
the supervision of their parents or their elders but the parents did not 
interfere in their decision making. Total 20 school going children 
participated in this study by including both male and female children from 
Punjab, Sindh, and Islamabad (Federal). 


C. Data Collection 


Children used and played the story on their parents’ mobile phones multiple 
times. The Khel Tale application automatically collected the data about the 
choices of a child who played the game under the name of that child. At the 
end parents used the Send Report button inside the Khel Tale application to 
send the data for processing and analyzation. 


D. Findings 


In the first attempt by children to pick from good and bad option, 11 out of 
20 children picked the good option. In the second attempt by children to 
pick from good and bad option for the same episode, 13 out of 20 children 
picked the good option. Out of these 13 children, 8 children actually came 
from bad option while the 5 children did not change their decision of good 
option from their second attempt, and 6 children went to try out the bad 
option. In total for second attempt 14 children changed their decision. In the 
third attempt by children to pick from good and bad option for the same 
episode, 19 out of 20 children picked the good option. The 13 children who 
picked good option in second attempt stood by their decision, the 6 children 
who went to try out alternate bad option also came back and picked up the 
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good option again. All children statistics regarding the selection of option 
for first, second and third attempt are listed in Table 1. 


Table I 
Number of Children Picking Good and Bad Options in Three Attempts 


Attempt Picked Picked Changed from Changed from 


Number Good Bad Good to Bad _—_ Bad to Good 
First 11 9 - - 
Second 13 7 
Third 19 1 0 6 


The current study clearly showed that after three iterations, 95% 
children ended up with the good option in the end. These 19 out of 20 
children consisted of those children who either picked the good option, 
stayed with it or who tried the both options and, in the end, decided to go 
with the good option. The child who decided to pick the bad option even 
after three iterations is the only child who never seen the reward of the good 
option. Total 5 children stayed with the good option in all three attempts 
and only | child stayed with the bad option in all three attempts. Also 14 
children decided to stay with good option after seeing the consequences of 
the bad option. A more visual illustration of results in the form of graph is 
shown in Figure 8. 


100% 


0% 
Attempt 1 Attempt 2 Attempt 3 


m=Good mBad 


Fig. 8. Number of children picking good and bad options in three attempts 
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Khel Tale mobile application clearly showed the effective results. Some 
children picked the good option from start and never changed it even after 
several attempts because they actually listened to the advice and followed 
it. Some children who saw the both good and bad options result decided to 
stay with the good option. Children wanted their main character to get the 
reward as an outcome of a good action instead of a punishment as a 
consequence of a bad action. This is due to their connection with the main 
character of a story. They decided to pick the option that is appropriate for 
the main character in the story. Thus, they actually followed the advice 
given to the main character from their parents. 


V. Conclusion 


The current study claims that children nowadays seldom pay heed to the 
advices of their elders. They often considered those advises as a boring 
lecture and ignores them. This study proposes an approach to teach the 
children by the means of a decision-based 3D animated story application, 
where a child can make decisions on behalf of the main character in the 
presented story by the story app. In this case, children can instantly see the 
consequences of their actions, and they get a chance to learn from it without 
getting hurt. The Khel Tale application for this purpose use child friendly 
3D animations in which the main character is also a child. In this way, 
children can easily relate themselves with the main character. The game 
application features Urdu dubbed animations with all the modern computer 
animation techniques like advanced 3D modelling, texturing, rigging, and 
the advanced light rendering techniques. 


The current study concluded that the children actually learned a valuable 
lesson from the Khel Tale mobile application. The children interacted with 
Khel Tale application by making decisions for the main character. This 
game is divided into episodes in which each episode uses animated videos. 
The story of each episode covers a specific moral lesson for children. They 
play an episode multiple times to learn the good or bad advices through both 
good and bad options. Also, they observe the main character receiving 
rewards when they listen to the advice of their parents in a good ending of 
the story. They also observe the punishments their characters face when 
they ignore the advices of their parents in a bad ending. Most of the children 
ultimately decided to stick with the good ending option, no matter how 
much the other bad ending option tempted them. Thus, children observed 
the advices given to the main characters from their parents. That’s how, they 
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connected themselves with the main character and decided to pick an action 
that suited best for the main character in the story. In addition, apart from 
ethical education, this application can be advanced further to teach the 
children about other disciplines such as natural and social sciences etc. 
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